<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/js.cookie.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/bootstrap.min.js" ></script>
    <script src="js/bootstrap-datepicker.min.js"></script>
    <link href="css/bootstrap-datepicker.min.css" rel="stylesheet">

    <script>
        $(document).ready(function() {
            var role;
            var loginStatusText = Cookies.get('loginStatus')
            if (loginStatusText) {
                var loginStatus
                try {
                    loginStatus = JSON.parse(loginStatusText);
                    role = loginStatus.role
                } catch (error) {
                    console.error("An error occurred:", error);
                }
            }
            // 控制按钮显示
            function controlButtons() {
                if (role === 'general_manager' || role === 'admin') {
                    $('#addBtn').show();
                } else {
                    $('#addBtn').hide();
                }
            }
            controlButtons();

            // 查询列表
            function searchList() {
                var name = $('#nameSearch').val();
                $.ajax({
                    url: 'api/userInfo/list',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ name: name }),
                    success: function(response) {
                        var data = response.data;
                        var tableContent = '';
                        data.forEach(function(item) {

                            if (role === 'general_manager' || role === 'admin' ) {
                                tableContent += '<tr>' +
                                    '<td>' + item.id + '</td>' +
                                    '<td>' + item.name + '</td>' +
                                    '<td>' + item.sex + '</td>' +
                                    '<td>' + item.entryDate + '</td>' +
                                    '<td>' + item.phone + '</td>' +
                                    '<td>' + item.roleDesc + '</td>' +
                                    '<td>' +
                                    '<button class="btn btn-primary btnEdit" data-id="' + item.id + '">编辑</button> ' +
                                    '<button class="btn btn-danger btnDelete" data-id="' + item.id + '">删除</button></td>' +
                                    '</tr>';
                            } else {
                                tableContent += '<tr>' +
                                    '<td>' + item.id + '</td>' +
                                    '<td>' + item.name + '</td>' +
                                    '<td>' + item.sex + '</td>' +
                                    '<td>' + item.entryDate + '</td>' +
                                    '<td>' + item.phone + '</td>' +
                                    '<td>' + item.roleDesc + '</td>' +
                                    '<td>' +
                                    ' ' +
                                    ' </td>' +
                                    '</tr>';
                            }


                        });
                        $('#userInfoList').html(tableContent);
                    }
                });
            }
            searchList();

            // 绑定查询事件
            $('#searchBtn').click(searchList);

            // 绑定新增事件
            $('#btn-add').click(function() {
                var userInfo = {
                    name: $('#addName').val(),
                    sex: $('#addSex').val(),
                    entryDate: $('#addEntryDate').val(),
                    phone: $('#addPhone').val(),
                    role: $('#addRole').val()
                };
                $.ajax({
                    url: 'api/userInfo/add',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(userInfo),
                    success: function(res) {
                        searchList(); // 刷新列表
                        if(res.stateCode === '200'){
                            $('#addModal').modal('hide'); // 关闭模态框
                        } else {
                            // 然后显示原生的 alert
                            window.alert(res.msg);
                        }

                    }
                });
            });

            // 绑定编辑事件
            $(document).on('click', '.btnEdit', function() {
                var id = $(this).data('id');
                $.ajax({
                    url: 'api/userInfo/detail',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: id }),
                    success: function(response) {
                        var userInfo = response.data;
                        $('#editId').val(userInfo.id);
                        $('#editName').val(userInfo.name);
                        $('#editSex').val(userInfo.sex);
                        $('#editEntryDate').val(userInfo.entryDate);
                        $('#editPhone').val(userInfo.phone);
                        $('#editRole').val(userInfo.role);
                        $('#editModal').modal('show');
                    }
                });
            });

            // 绑定删除事件
            $(document).on('click', '.btnDelete', function() {
                var id = $(this).data('id');
                $.ajax({
                    url: 'api/userInfo/delete',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: id }),
                    success: function() {
                        searchList(); // 刷新列表
                    }
                });
            });

            // 初始化日期选择器
            $('#addEntryDate, #editEntryDate').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                // viewMode: 'months', // 设置视图模式为月份选择
                // minViewMode: 'months' // 设置最小视图模式（用户无法选择比月份更详细的日期
            });

            // 加载角色和性别下拉菜单数据
            loadDropdownData();
        });

        function loadDropdownData() {
            var roleSelect = $('#addRole, #editRole');
            var sexSelect = $('#addSex, #editSex');
            roleSelect.empty();
            sexSelect.empty();
            roleSelect.append($('<option></option>').val('').html('请选择角色'));
            sexSelect.append($('<option></option>').val('').html('请选择性别'));

                // roleSelect.append($('<option></option>').val('general_manager').html('总经理'));
                // roleSelect.append($('<option></option>').val('manager').html('部门经理'));
                roleSelect.append($('<option></option>').val('admin').html('admin'));

                sexSelect.append($('<option></option>').val('女').html('女'));
                sexSelect.append($('<option></option>').val('男').html('男'));
        }
    </script>
    <script>
        $(function () {
            $('#header').load('admin_header.html');
        })
    </script>
</head>
<body>
<div id="header"></div>
<div class="container">
    <h2>用户信息管理</h2>
    <div class="input-group">
        <input type="text" class="form-control" id="nameSearch" placeholder="员工名称">
        <span class="input-group-btn">
            <button class="btn btn-default" id="searchBtn">查询</button>
        </span>
    </div>
    <button class="btn btn-success" id="addBtn" data-toggle="modal" data-target="#addModal">新增用户</button>
    <table class="table table-striped" >
        <thead>
        <tr>
            <th>ID</th>
            <th>员工名称</th>
            <th>性别</th>
            <th>入职时间</th>
            <th>手机号</th>
            <th>角色</th>
            <th>操作</th>
        </tr>
        </thead>
        <!-- 用户信息列表将通过AJAX动态填充 -->
        <tbody id="userInfoList">
        </tbody>
    </table>
</div>

<!-- 新增用户模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">新增用户</h4>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" id="addName" placeholder="员工名称" required>
                <select id="addSex" class="form-control" required>
                    <option value="">请选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <input type="text" class="form-control" id="addEntryDate" placeholder="入职时间" required>
                <input type="text" class="form-control" id="addPhone" placeholder="手机号" required>
                <select id="addRole" class="form-control" required>
                    <option value="">请选择角色</option>
                </select>
                <button class="btn btn-primary" id="btn-add">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑用户模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">编辑用户</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="editId">
                        <label for="editName">员工名称</label>
                        <input type="text" class="form-control" id="editName" placeholder="员工名称" required>
                    </div>
                    <div class="form-group">
                        <label for="editSex">性别</label>
                        <select class="form-control" id="editSex" required>
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editEntryDate">入职时间</label>
                        <input type="text" class="form-control datepicker" id="editEntryDate" placeholder="入职时间" required>
                    </div>
                    <div class="form-group">
                        <label for="editPhone">手机号</label>
                        <input type="text" class="form-control" id="editPhone" placeholder="手机号" required>
                    </div>
                    <div class="form-group">
                        <label for="editRole">角色</label>
                        <select class="form-control" id="editRole" required>
                            <option value="">请选择角色</option>
                            <!-- 动态加载角色选项 -->
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">更新</button>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
</html>
